<script setup lang="ts">
import { ObjectMeta } from "@/views/domain/kubeHud/api/k8s/types";
import KContainer from "./KContainer.vue";
import InTagLine from "./InTagLine.vue";
import KSpace from "./KSpace.vue";
import KDescGroup from "./KDescGroup.vue";
import KDescRow from "./KDescRow.vue";
import { computed, ref } from "vue";
import KeyValueWidget from "./KeyValueWidget.vue";

type Prop = {
  edit?: boolean;
};

defineProps<Prop>();
const metadata = defineModel<ObjectMeta>();
const emit = defineEmits(["labelChange"]);

const onLabelChanged = () => {
  emit("labelChange", metadata.value.labels);
};
</script>

<template>
  <KSpace direction="column" alignment="stretch" gap="10px">
    <KContainer title="标签" fill>
      <KeyValueWidget
        v-model:model-value="metadata.labels"
        edit
        @change="onLabelChanged"
      />
    </KContainer>

    <KContainer v-if="metadata.annotations || edit" title="注解" fill>
      <KeyValueWidget v-model:model-value="metadata.annotations" edit />
    </KContainer>
  </KSpace>
</template>
<style lang="scss" scoped></style>
